<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>过渡动效</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>Transitions</h1>
        <ul>
            <li>
                <router-link to="/">/</router-link>
            </li>
            <li>
                <router-link to="/parent">/parent</router-link>
            </li>
            <li>
                <router-link to="/parent/foo">/parent/foo</router-link>
            </li>
            <li>
                <router-link to="/parent/bar">/parent/bar</router-link>
            </li>
        </ul>
        <transition name="fade" mode="out-in">
            <router-view class="view"></router-view>
        </transition>
    </div>
    <script type="text/javascript">


    const Home = {
        template: `
    <div class="home">
      <h2>Home</h2>
      <p>hello</p>
    </div>
  `
    }

    const Parent = {
        data() {
            return {
                transitionName: 'slide-left'
            }
        },
        // dynamically set transition based on route change
        watch: {
            '$route' (to, from) {
                const toDepth = to.path.split('/').length
                const fromDepth = from.path.split('/').length
                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
            }
        },
        template: `
    <div class="parent">
      <h2>Parent</h2>
      <transition :name="transitionName">
        <router-view class="child-view"></router-view>
      </transition>
    </div>
  `
    }

    const Default = {
        template: '<div class="default">default</div>'
    }
    const Foo = {
        template: '<div class="foo">foo</div>'
    }
    const Bar = {
        template: '<div class="bar">bar</div>'
    }

    const router = new VueRouter({
        // mode: 'history',
        // base: __dirname,
        routes: [{
            path: '/',
            component: Home
        }, {
            path: '/parent',
            component: Parent,
            children: [{
                path: '',
                component: Default
            }, {
                path: 'foo',
                component: Foo
            }, {
                path: 'bar',
                component: Bar
            }]
        }]
    })

    new Vue({
        router
    }).$mount('#app')
    </script>
</body>

</html>
